<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>99乘法表</title>
</head>
<body>
  <div id="box"></div>
  <button id="create">点我生成99乘法表</button>
</body>

<script>

const create_btn = document.getElementById('create');
const box = document.getElementById('box');

function addBr() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let br = document.createElement('br');
      box.appendChild(br);
      resolve();
    }, 500)
  })
}

async function create99chengfabiao() {
  for(let i = 0;i < 9; i++) {
      for (let j = 0; j < i+1; j++) {
        let text = document.createElement('span');
        text.innerText = `${i+1}*${j+1}=${(i+1)*(j+1)} `;
        box.appendChild(text);
      }
      await addBr();
    }
}

create_btn.addEventListener('click', create99chengfabiao);


</script>

</html>